<template>
  <div class="app-container">
    <div class="warning">
      <h2>预警设置</h2>
      <div class="warnsearch">
        <el-input placeholder="病历号/姓名/送检单位名称"
                  suffix-icon="el-icon-search"></el-input>
        <p class="btn">
          <el-button type="primary"
                     icon="el-icon-search">查询</el-button>
          <el-button icon="el-icon-refresh-right"
                     style="background: #fff; border-color: #D0D3D6 ; color:#000;">重置</el-button>
        </p>
      </div>
      <div class="production">
        <img src="@/assets/images/mail/Graphic Side@2x.png"
             alt="">
      </div>

      <div class="seting">
        <h3>提取试验</h3>
        <el-table :data="tableData"
                  stripe
                  style="width: 100%">
          <el-table-column prop="data"
                           label="数据项">
          </el-table-column>
          <el-table-column prop="condition"
                           width="500px"
                           label="监测条件">
            <template slot-scope="scope">
              <div class="gxg">
                <p>{{scope.row.condition}}</p>
                <el-checkbox-group v-model="scope.row.checkList">
                  <el-checkbox label="1">复选框 A</el-checkbox>
                  <el-checkbox label="2">复选框 B</el-checkbox>
                  <el-checkbox label="3">复选框 C</el-checkbox>
                  <el-checkbox label="1">复选框 A</el-checkbox>
                  <el-checkbox label="2">复选框 B</el-checkbox>
                  <el-checkbox label="3">复选框 C</el-checkbox>
                </el-checkbox-group>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="status"
                           label="监测状态">
            <template #default="scope">
              <el-switch v-model="scope.row.value"
                         active-color="#aa2299">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="threshold"
                           label="监测阈值">
          </el-table-column>
          <el-table-column prop="cond"
                           label="触发条件">
          </el-table-column>
          <el-table-column prop="warnmain"
                           label="预警内容">
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 扩增试验 -->
    <div class="augment">
      <h3>扩增实验</h3>
      <div class="seting">
        <el-table :data="tableData"
                  stripe
                  style="width: 100%">
          <el-table-column prop="data"
                           label="数据项">
          </el-table-column>
          <el-table-column prop="condition"
                           label="监测条件">
          </el-table-column>
          <el-table-column prop="status"
                           label="监测状态">
          </el-table-column>
          <el-table-column prop="threshold"
                           label="监测阈值">
          </el-table-column>
          <el-table-column prop="cond"
                           label="触发条件">
          </el-table-column>
          <el-table-column prop="warnmain"
                           label="预警内容">
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 纯化试验 -->
    <div class="purify">
      <h3>纯化实验</h3>
      <div class="seting">
        <el-table :data="tableData"
                  stripe
                  style="width: 100%">
          <el-table-column prop="data"
                           label="数据项">
          </el-table-column>
          <el-table-column prop="condition"
                           label="监测条件">
          </el-table-column>
          <el-table-column prop="status"
                           label="监测状态">
          </el-table-column>
          <el-table-column prop="threshold"
                           label="监测阈值">
          </el-table-column>
          <el-table-column prop="cond"
                           label="触发条件">
          </el-table-column>
          <el-table-column prop="warnmain"
                           label="预警内容">
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 建库试验 -->
    <div class="create">
      <h3>建库实验</h3>
      <div class="seting">
        <el-table :data="tableData"
                  stripe
                  style="width: 100%">
          <el-table-column prop="data"
                           label="数据项">
          </el-table-column>
          <el-table-column prop="condition"
                           label="监测条件">
          </el-table-column>
          <el-table-column prop="status"
                           label="监测状态">
          </el-table-column>
          <el-table-column prop="threshold"
                           label="监测阈值">
          </el-table-column>
          <el-table-column prop="cond"
                           label="触发条件">
          </el-table-column>
          <el-table-column prop="warnmain"
                           label="预警内容">
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 上级试验 -->
    <div class="subset">
      <img src="@/assets/images/mail/Graphic Side@2x(1).png"
           alt="">
      <h3>上机实验</h3>
      <div class="seting">
        <el-table :data="tableData"
                  stripe
                  style="width: 100%">
          <el-table-column prop="data"
                           label="数据项">
          </el-table-column>
          <el-table-column prop="condition"
                           label="监测条件">
          </el-table-column>
          <el-table-column prop="status"
                           label="监测状态">
          </el-table-column>
          <el-table-column prop="threshold"
                           label="监测阈值">
          </el-table-column>
          <el-table-column prop="cond"
                           label="触发条件">
          </el-table-column>
          <el-table-column prop="warnmain"
                           label="预警内容">
          </el-table-column>
        </el-table>
      </div>
      <p class="bottom">
        <el-button type="info">取消</el-button>
        <el-button type="primary">保存</el-button>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReproductiveFrontIndex',

  data () {
    return {
      tableData: [
        {
          date: '样本核酸浓度(ng/ul)',
          condition: '样本类型为：',
          status: '上海',
          threshold: '普陀区',
          cond: '',
          warnmain: 200333,
          value: true,
          checked: true,
          checkList: ['1', '2']
        },

      ]
    };
  },

  mounted () {

  },

  methods: {

  },
};
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  background-color: #f2f3f4;

  h2 {
    font-size: 18px;
    font-weight: bold;
  }

  h3 {
    font-size: 16px;
    font-weight: bold;
    color: #141414;
  }

  img {
    width: 100%;
    height: 79px;
  }

  .seting {
    font-size: 14px;
    color: #262626;
    font-weight: bold;
  }

  .warning {
    width: 100%;
    box-sizing: border-box;
    padding: 18px;
    background-color: #fff;

    .warnsearch {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .el-input--medium {
        width: 300px;
      }

      .el-button--primary {
        background-color: #aa2299;
        border: none;
      }
    }

    .production {
      width: 100%;
    }
  }

  // 扩增实验
  .augment {
    width: 100%;
    box-sizing: border-box;
    padding: 18px;
    background-color: #fff;
    margin-top: 20px;
  }

  // 纯化试验
  .purify {
    width: 100%;
    box-sizing: border-box;
    padding: 18px;
    background-color: #fff;
    margin-top: 20px;
  }

  // 建库试验
  .create {
    width: 100%;
    box-sizing: border-box;
    padding: 18px;
    background-color: #fff;
    margin-top: 20px;
  }

  // 上机试验
  .subset {
    width: 100%;
    box-sizing: border-box;
    padding: 50px 18px 50px;
    background-color: #fff;
    margin-top: 20px;

    .bottom {
      margin: 30px 0 50px;

      .el-button--primary {
        background-color: #aa2299;
        border: none;
      }

      .el-button--info {
        background-color: #f0f0f0;
        border: none;
        color: #000;
      }
    }
  }
}
.gxg {
  display: flex;
  width: 100%;
  p {
    width: 200px;
  }
}
</style>
